<!-- 
* @desc:消息管理列表
* @fileName:MessageDetails.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-5-24
!-->
<script setup lang="ts">
import { ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import {
  showSuccessMessage, //成功消息
} from "@/common/message";
import { getCurrentInstance, reactive, ref } from "vue";
const { proxy } = getCurrentInstance() as any;

const props = defineProps({
  tableData: Array as any,
  // 数据列表加载动画
  isListLoading: {
    type: Boolean,
    default: true,
  },
  //弹窗显示方法
  dialogEditFunc: Function as any,
  // 页面初次加载
  isPageLoading: Boolean,
});

// 点击编辑按钮（row：当前行数据）
const edit = (row: any) => {
  props.dialogEditFunc("修改", row);
};

//获取表格checkbox
const handleSelectionChange = (val:any) => {
  console.log(val);
}

const data = reactive({
  tableData:[
    {id:'1',col1:'服务器',col2:"服务器恢复正常",col3:"名称于<年/月/年 00：00>回复为正常,请知悉!",col4:"通知",col5:"运维工程师 组织管理员",col6:"系统消息",col7:"服务器列表仅显示该服务器",col8:"2022/05/09"},
    {id:'2',col1:'服务器',col2:"服务器异常",col3:"名称于<年/月/年 00：00>回复为正常,请知悉!",col4:"告警",col5:"运维工程师 组织管理员",col6:"系统消息 邮件 短信",col7:"服务器列表仅显示该服务器",col8:"2022/05/09"},
    {id:'3',col1:'执行器',col2:"执行器运行中",col3:"名称于<年/月/年 00：00>回复为正常,请知悉!",col4:"通知",col5:"运维工程师 组织管理员",col6:"系统消息",col7:"服务器列表仅显示该服务器",col8:"2022/05/09"},
    {id:'4',col1:'执行器',col2:"执行器停止运行",col3:"名称于<年/月/年 00：00>回复为正常,请知悉!",col4:"告警",col5:"运维工程师 组织管理员",col6:"邮件 短信",col7:"服务器列表仅显示该服务器",col8:"2022/05/09"},
    {id:'5',col1:'资源库',col2:"资源库回复正常",col3:"名称于<年/月/年 00：00>回复为正常,请知悉!",col4:"告警",col5:"运维工程师 组织管理员",col6:"邮件 短信",col7:"服务器列表仅显示该服务器",col8:"2022/05/09"},
    {id:'6',col1:'资源库',col2:"资源库异常",col3:"名称于<年/月/年 00：00>回复为正常,请知悉!",col4:"通知",col5:"运维工程师 组织管理员",col6:"系统消息",col7:"服务器列表仅显示该服务器",col8:"2022/05/09"}
  ]
})
</script>

<template>
  <div class="page-details">
    <el-table
      :data="data.tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55px" />
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="col1" label="事件源" />
      <el-table-column prop="col2" label="事件" />
      <el-table-column prop="col3" label="消息" />
      <el-table-column prop="col4" label="消息类型" />
      <el-table-column prop="col5" label="接受对象" :show-overflow-tooltip="true" />
      <el-table-column prop="col6" label="接受渠道" />
      <el-table-column prop="col7" label="跳转" :show-overflow-tooltip="true" />
      <el-table-column prop="col8" label="更新时间" />
      <el-table-column prop="operation" label="操作" width="80px">
        <template #default="scope">
          <span class="operation">
            <lanius-tooltip content="接受设置">
              <img src="@/assets/img/message/object.svg" /></lanius-tooltip
          ></span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据为空显示@click="del(scope.row)" -->
    <div v-if="props.isPageLoading === false" slot="empty">
      <el-empty description="暂无数据" />
    </div>
  </div>
</template>

<style>
.custom-popover .custom-popover-title {
  font-size: 20px;
  color: #fff;
  letter-spacing: 1px;
}
.custom-popover .custom-popover-title img {
  width: 25px;
  height: 22px;
  position: relative;
  top: 3px;
  margin-left: 10px;
  margin-right: 15px;
}
.custom-popover .custom-popover-content {
  color: #fff;
  font-size: 14px;
  padding-left: 50px;
  line-height: 40px;
}
.custom-popover .custom-popover-button {
  text-align: right;
}
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background-color: rgba(106, 106, 106, 1);
  color: #fff;
}

.el-popper.is-customized .el-popper__arrow::before {
  background-color: rgba(106, 106, 106, 1);
  right: 0;
}
.popper {
  background-color: rgba(106, 106, 106, 0.9) !important;
  height: 94px !important;
  border-radius: 0 !important;
}
.custom-popover + .el-popper__arrow::before {
  background-color: rgba(106, 106, 106, 0.9) !important;
  border: none !important;
}
</style>
<style scoped lang="scss">
.operation {
  padding: 0 5px;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.page-details {
  margin-top: 15px;
}

.el-table {
  :deep(th) {
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 10px;
    }
  }
  :deep(td) {
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 10px;
    }
  }
  :deep(.el-table__row--striped) {
    td {
      background-color: rgba($color: #f6f6f6, $alpha: 0.56) !important;
    }
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      height: 0;
    }
  }
}
</style>
